{template '_headerv2'}


<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html {
        background: #f0f1f5;
    }

    .title {
        height: 50px;
        text-align: center;
        font-size: 16px;
        line-height: 50px;
        border-bottom: 1px solid #ddd;
        background: #fff;
    }

    .itemTitle {
        font-size: 16px;
    }

    .itemTitle span {
        font-size: 12px;
    }

    .package .on .itemTitle {
        background: url('{MODULE_URL}template/mobile/images/check.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .package {
        background: #fff;
        margin-bottom: 15px;
    }

    .package > div {
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
    }

    .package > div .itemTitle {
        margin-bottom: 10px;
        background: url('{MODULE_URL}template/mobile/images/uncheck.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .package ul li {
        line-height: 34px;
        height: 34px;
        font-size: 14px;
        color: #666;
        padding-left: 20px;
        position: relative;
    }

    .package ul li::after {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #0097fa;
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -2.5px;
    }

    .package > div .second {
        margin-bottom: 0;
    }

    .payment {
        background: #fff;
    }

    .payment li {
        height: 40px;
        line-height: 40px;
        padding: 0 15px 0 40px;
        border-bottom: 1px solid #ddd;
    }

    .payment .pay {
        height: 50px;
        line-height: 50px;
        text-indent: 20px;
        border-bottom: 1px solid #ddd;
    }

    .payment ul li.on div {
        background: url('{MODULE_URL}template/mobile/images/check.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .payment ul li div {
        background: url('{MODULE_URL}template/mobile/images/uncheck.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .wechat {
        background: url('{MODULE_URL}template/mobile/images/wechat.png') 15px center no-repeat;
        background-size: 20px 20px;
    }

    .count {
        background: url('{MODULE_URL}template/mobile/images/count.png') 15px center no-repeat;
        background-size: 20px 20px;
    }

    .enSurePay {
        width: 90%;
        height: 50px;
        border-radius: 5px;
        background: #0097fa;
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin: 20px auto;
    }
</style>
</head>
<body>
<div class="title">
    确认订单
</div>
<section class="package">

    {loop $level_list $index $vip}

    <div class="{if $index == 0} on {/if}">
        {if $index == 0}
            <input type="hidden" id="first_price" value="{$vip['level_price']}">
            <input type="hidden" id="first_oid" value="{$vip['id']}">
            <input type="hidden" id="first_href" value="{php echo $this->createMobileUrl('vip', array('op'=>'buyvip', 'level_id'=>$vip['id']));}">
        {/if}

        <div class="itemTitle" onclick="selectPrice({$vip['level_price']},{$vip['id']},'{php echo $this->createMobileUrl('vip', array('op'=>'buyvip', 'level_id'=>$vip['id']));}');">
            {$vip['level_name']}<span>{$vip['level_price']}/{$vip['level_validity']}天</span>
        </div>
        {if $vip['id'] == 3}
            <ul>
                <li>
                    免费学习线上精品课件
                </li>
                <li>
                    直接推广VIP分享500元奖学金
                </li>
                <li>
                    原价3980/年，特惠1000元/年
                </li>
            </ul>
        {/if}
    </div>

    {/loop}


</section>
<section class="payment">
    <div class="pay">
        支付平台
    </div>
    <ul>
        <li class="wechat on">
            <div>微信支付</div>
        </li>
        <!-- <li class="count"><div>账户余额</div></li> -->
    </ul>
</section>
<div class="enSurePay">
    确认支付￥<span id="btn-price"> </span>
</div>

<script>
    var price = 0;
    var oid = 0;
    var _href;

    function _init() {
        price =  $("#first_price").val();
        oid =    $("#first_oid").val();
        _href =    $("#first_href").val();
        document.getElementById("btn-price").innerHTML = price;
    }
    _init();
    function selectPrice(Price, Oid,url) {
        price = Price;
        oid = Oid;
        _href = url;
        console.log(_href);
        if (price <= 0 || oid <= 0) {
            alert('价格信息错误，请刷新重试;');
            return;
        }

        document.getElementById("btn-price").innerHTML = price.toFixed(2);
    }

    $(".package>div").click(function () {
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on').siblings().removeClass('on')
    })
    $(".payment li").click(function () {
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on').siblings().removeClass('on')
    })
    $(".enSurePay").click(function () {
       location.href = _href;
    })
</script>

{template '_footerv2'}